"use client"
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import React from 'react'

const assectLink = ['/','/page1','/page2','/page3']
export default function header() {
  const pathname = usePathname();
  if(!assectLink.includes(pathname)) return null;
  return (
    <div className="absolute width-full z-10">
      <div className="flex justify-between">
        <div>
          <Link href="/" className="font-blod">Home</Link>
        </div>
        <div className="text-xl space-x-4">
          <Link className={`link ${pathname === 'page1' ? 'active' : ''}`} href="/page1">page1</Link>
          <Link className={`link ${pathname === 'page2' ? 'active' : ''}`} href="/page2">page2</Link>
          <Link className={`link ${pathname === 'page3' ? 'active' : ''}`} href="/page3">page3</Link>
        </div>
      </div>
    </div>
  )
}
